<template>
  <Draggable class="generator-draggable el-row" :list="layouts" :animation="340" group="componentsGroup">
    <CommonRender   v-for="(item,index) in layouts"
                   :key="item.id"
                   :index="index"
                   :current-item="item"
                   :activeId="activeId"
                   :layouts="layouts"
                   @activeItem="currentItem"
                   @copyItem="drawingItemCopy"
                   @deleteItem="drawingItemDelete"
    ></CommonRender>
  </Draggable>
</template>

<script>

import Draggable from 'vuedraggable'
import CommonRender from "../CommonRender"
export default {
  name: "common-draggable",
  props:{
    layouts:{
      type:Array
    },
    activeId:{
      type:Number
    }
  },
  components:{
    Draggable,
    CommonRender
  },
  methods:{
    currentItem(currentItem) {
      this.$emit("activeItem", currentItem)
    },
    drawingItemCopy({item}) {
      let clone = JSON.parse(JSON.stringify(item))
      clone.id += new Date().getTime();
      this.layouts.push(clone)
      this.currentItem(clone)
    },
    drawingItemDelete({index,item}) {
      this.layouts.splice(index,1)
      // this.currentItem(-1)
    }
  }
}
</script>

<style>
.common-draggable{
  padding-bottom:10px;
}
.generator-draggable .sortable-ghost {
  border-top:4px solid #2563EB;
  background: #60A5FA;
}
</style>
